<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <title>金融</title>

    <script src="../js/base.min.js"></script>

    <link rel="stylesheet" href="//at.alicdn.com/t/font_1522966_j22gqux4jz.css"/>
    <link rel="stylesheet" href="../css/jinrong.css"/>
</head>
<body>


<header>
    <div flex="cross:center" class="div">
        <div flex="cross:center" class="div-1">
            <i class="iconfont icon-fangdajing"></i>
            <input type="text" placeholder="点击输入你想要的内容">
        </div>
        <i class="iconfont icon-kefu"></i>
    </div>

    <ul class="ul" flex="main:justify">
        <li flex="dir:top cross:center">
            <img src="../img/1.png"/>

            <p>刷卡收款</p>
        </li>
        <li flex="dir:top cross:center">
            <img src="../img/2.png"/>

            <p>刷卡收款</p>
        </li>
        <li flex="dir:top cross:center">
            <img src="../img/3.png"/>

            <p>刷卡收款</p>
        </li>
        <li flex="dir:top cross:center">
            <img src="../img/4.png"/>

            <p>刷卡收款</p>
        </li>

    </ul>
</header>

<section class="se">
    <ul class="ul-2" flex>
        <li flex="dir:top cross:center">
            <i class="iconfont icon-youhuiquan1"></i>

            <p>优惠券</p>
        </li>
        <li flex="dir:top cross:center">
            <i class="iconfont icon-liwulipin"></i>

            <p>推荐有礼</p>
        </li>
        <li flex="dir:top cross:center">
            <i class="iconfont icon-shangchang"></i>

            <p>我的商城</p>
        </li>
        <li flex="dir:top cross:center">
            <i class="iconfont icon-youhuiquan"></i>

            <p>惠买单</p>
        </li>
    </ul>
    <ul class="ul-2" flex>
        <li flex="dir:top cross:center">
            <i class="iconfont icon-youhuiquan1"></i>

            <p>优惠券</p>
        </li>
        <li flex="dir:top cross:center">
            <i class="iconfont icon-liwulipin"></i>

            <p>推荐有礼</p>
        </li>
        <li flex="dir:top cross:center">
            <i class="iconfont icon-shangchang"></i>

            <p>我的商城</p>
        </li>
        <li flex="dir:top cross:center">
            <i class="iconfont icon-youhuiquan"></i>

            <p>惠买单</p>
        </li>
    </ul>

</section>

<section class="se-1" flex="dir:top">
    <img src="../img/10.png" class="img"/>

</section>

<section class="se-2" flex="dir:top cross:center">
    <div class="div-4" flex="cross:center">
        <div></div>
        <span>收支明细 </span>
    </div>
    <div  class="szmx" flex>
        <div  flex=" cross:center dir:top">
            <div class="price">
                ￥168.5
                <span class="sp">万</span>
            </div>
            <span class="sp-1">本月收款金额</span>
        </div>
        <div  class="kd"  flex=" cross:center dir:top">
            <div class="price">
                ￥168.5
                <span class="sp">万</span>
            </div>
            <span class="sp-1">本月收款金额</span>
        </div>
    </div>
    <button>查看详细账单</button>


</section>
<footer>
<ul flex=" main:justify">
    <li class="li" flex="dir:top cross:center">
        <img src="../img/5.png" >
        <p>首页</p>
    </li>
    <li class="li-1" flex="dir:top cross:center">
        <img src="../img/6.png" >
        <p>理财</p>
    </li>

    <li class="li-1" flex="dir:top cross:center">
        <img src="../img/7.png" >
        <p>理财</p>
    </li>

    <li class="li-1" flex="dir:top cross:center">
        <img src="../img/8.png" >
        <p>我的</p>
    </li>

</ul>
</footer>

</body>
</html>